<template>
	<view class="secondaryNav-mod flex center fz">
		<view class="secondaryNav-mod-item" v-for="item,index in list" :key="index" :class="{secondaryNavItemActive:index==countIndex}" @click="stairNavItemClick(index)">
			{{item.title}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"secondaryNav",
		data() {
			return {
				countIndex:0
			};
		},
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		methods:{
			stairNavItemClick(index) {
				this.countIndex = index
				this.$emit('secondClick',index)
			}
		}
	}
</script>

<style lang="scss">
.secondaryNav-mod {
	justify-content: space-around;
	.secondaryNav-mod-item {
		position: relative;
		padding: 30rpx 0 40rpx;
	}
	.secondaryNavItemActive {
		font-weight: bold;
		&::before {
			content: '';
			position: absolute;
			bottom: 10rpx;
			left: 12rpx;
			width: 48rpx;
			height: 6rpx;
			background-color: #35bb9a;
		}
	}
	.secondaryNavItemActive {
		&:nth-child(1) {
			&::before {			
				left: 0;
			}
		}
	}
}
</style>
